<div id="report_forms">
    <link rel="stylesheet" href="./pages/content/systemManager/xxlJob/jobIndex.css">
    <div class="yu-rwzxContainer">
        <el-row :gutter="24">
            <el-col :span="8">
                <div class="rwzx-gridContent blue">
                    <i class="el-icon-yx-flag"></i>
                    <div>
                        <div>
                            <p>{{ $t('jobIndex.rwsl') }}</p>
                            <h5 id="jobInfoCount">0</h5>
                        </div>
                        <p>{{ $t('jobIndex.ddzxyxdrwsl') }}</p>
                    </div>

                </div>
            </el-col>
            <el-col :span="8">
                <div class="rwzx-gridContent warning">
                    <i class="el-icon-yx-calendar"></i>
                    <div>
                        <div>
                            <p>{{ $t('jobIndex.ddcs') }}</p>
                            <h5 id="jobLogCount">0</h5>
                        </div>
                        <p>{{ $t('jobIndex.ddzxcfdddcs') }}</p>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="rwzx-gridContent success">
                    <i class="el-icon-yx-equalizer"></i>
                    <div>
                        <div>
                            <p>{{ $t('jobIndex.zxqsl') }}</p>
                            <h5 id="executorCount">0</h5>
                        </div>
                        <p>{{ $t('jobIndex.ddzxzxdzxqjqsl') }}</p>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div id="yu-rwzxBox" :style="{height: height - 120 + 'px'}">
            <div class="yu-rwzxBoxheader" >
                <h2>{{ $t('jobIndex.ddbb') }}</h2>
                <el-popover
                        ref="popover4"
                        placement="bottom"
                        v-model="timepvisible"
                        width="200"
                        trigger="click" >
                    <ul id="timepopover">
                        <li>{{ $t('jobIndex.jr') }}</li>
                        <li>{{ $t('jobIndex.zr') }}</li>
                        <li class="yu-rwzxLiactive">{{ $t('jobIndex.by') }}</li>
                        <li>{{ $t('jobIndex.sgy') }}</li>
                        <li>{{ $t('jobIndex.zjyz') }}</li>
                        <li>{{ $t('jobIndex.zjyy') }}</li>
                        <template>
                            <div class="block">
                                <el-date-picker
                                        v-model="value"
                                        type="datetimerange"
                                        range-:separator="$t('jobIndex.z')"
                                        start-:placeholder="$t('jobIndex.ksrq')"
                                        end-:placeholder="$t('jobIndex.jsrq')"
                                        align="right">
                                </el-date-picker>
                            </div>
                        </template>
                        <div>
                            <el-button type="success" @click="selectDateFn">{{ $t('jobIndex.qr') }}</el-button>
                            <el-button type="info" @click="timepvisible = false">{{ $t('jobIndex.qx') }}</el-button></div>
                    </ul>

                </el-popover>
                <el-button v-popover:popover4 class="el-icon-yx-calendar"></el-button>
            </div>
            <div id="yu-rwzxChartBox" :style="{height: height - 200 + 'px'}" >
                <div id="yu-rwzxchartBox1" :style="{height: height - 200 + 'px',width: width + 'px'}" ></div>
                <div id="yu-rwzxchartBox2" :style="{height: height - 200 + 'px',width: width2 + 'px'}"></div>
            </div>
        </div>
    </div>
</div>
